.plugin-doc {
    background-color: var(--ks-background-panel) !important;

    :deep(.plugin-title) {
        font-size: 1.25em;
    }

    .plugin-icon {
        width: 25px;
        height: 25px;
        min-width: 25px;
        min-height: 25px;
    }

    .plugin-title {
        min-width: 50px;
    }

    .plugin-schema {
        :deep(.markdown) {
            display: flex;
            flex-direction: column;
            gap: var(--spacer);
        }

        :deep(button) {
            color: var(--ks-content-primary);
        }

        :deep(.code-block) {
            background-color: var(--ks-background-card);
            border: 1px solid var(--ks-border-primary);
            padding: 0.75rem;

            .line {
                font-size: 0.75rem;
            }

            .language, .copy {
                position: absolute;
                top: 0.75rem;
                right: 0.75rem;
            }
        }

        :deep(.language) {
            color: var(--ks-content-tertiary);
        }

        :deep(.plugin-section) {
            p {
                margin-bottom: 0;
            }

            .collapse-button {
                font-size: var(--font-size-lg);
                line-height: 1.5rem;
            }

            .collapsible-body .border {
                #{--collapsible-border-color}: var(--ks-border-primary);
            }

            > .collapse-button:not(.collapsed) {
                color: var(--ks-content-link);
            }

            [id$="-body"]:not(#examples-body) span {
                font-size: 1rem !important;
            }

            [id$="-body"] .type-box,
            [id$="-body"] .type-box *,
            [id$="-body"] span.type-box {
                font-size: 0.75rem !important;
            }

            .property {
                background-color: var(--ks-dropdown-background);

                button:hover {
                    background-color: var(--ks-dropdown-background-hover);
                }

                &:not(:has(.collapsed)) {
                    & > .collapsible-body {
                        background-color: var(--ks-dropdown-background-active);
                    }
                }
            }

            .type-box{
                .ref-type {
                    border-right: 1px solid var(--ks-border-primary);
                }

                &:has(.ref-type):hover {
                    background: var(--ks-button-background-secondary-hover) !important;

                    .ref-type {
                        border-right: 1px solid var(--ks-border-secondary);
                    }
                }
            }
        }
    }

    :deep(.alert-info) {
        display: flex;
        gap: 12px;
        padding: 16px 16px 0 16px;
        background-color: var(--ks-background-info);
        border: 1px solid var(--ks-border-info);
        border-left-width: 5px;
        border-radius: 8px;

        &::before {
            content: '!';
            min-width: 20px;
            height: 20px;
            margin-top: 4px;
            border-radius: 50%;
            background: var(--ks-content-info);
            border: 1px solid var(--ks-border-info);
            color: var(--ks-content-inverse);
            font: 600 13px/20px sans-serif;
            text-align: center;
        }

        p { color: var(--ks-content-info); }
    }

    :deep(.release-notes-btn) {
        background-color: var(--ks-background-info);
        color: var(--ks-content-info);
        border: 1px solid var(--ks-border-info);
        font-family: 'Courier New', Courier, monospace;
        white-space: nowrap; // Prevent button text from wrapping
        
        .material-design-icon {
            position: absolute;
            bottom: 0;
        }
        
        @media (max-width: 576px) {
            padding: 6px 12px;
            font-size: 0.875rem;
            min-width: auto;
        }
    }
}
